<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="员工姓名">
        <el-input v-model="formInline.keyword" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="时间塅查询">
        <el-date-picker
          v-model="daterange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy/MM/dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="分组类型">
        <el-select v-model="formInline.groupType" placeholder="分组类型">
          <el-option
            v-for="(type, index) in groupTypes"
            :key="index"
            :label="type.name"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="success" @click="onSubmit">柱状图</el-button>
        <el-button type="warning" @click="onSubmit">饼状图</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="groupType" label="分组类型"></el-table-column>
      <el-table-column prop="customerNum" label="潜在客户新增数"></el-table-column>
    </el-table>
    
    <el-dialog title="潜在客户报表-柱状图" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
    <!-- 显示柱状图 -->
    <ve-histogram :data="chartData"></ve-histogram>
    </el-dialog>
  </div>
</template>

<script>
import { getReportLists } from "@/request/httpApi";
export default {
  data() {
    return {
      groupTypes: [
        { name: "员工", value: "e.name" },
        { name: "年", value: "DATE_FORMAT(c.input_time, '%Y')" },
        { name: "月", value: "DATE_FORMAT(c.input_time, '%Y-%m')" },
        { name: "日", value: "DATE_FORMAT(c.input_time, '%Y-%m-%d')" }
      ],
      formInline: {
        groupType: "e.name"
      },
      daterange: "",
      tableData: [],
      dialogVisible: true,
      chartData: {
        columns: [],
        rows: []
      }
    };
  },
  methods: {
    onSubmit() {},
    handleClose() {
      this.dialogVisible = false
    }
  },
  created() {
    //发送网络请求
    getReportLists({
      currentPage: 1,
      pageSize: 10,
      keyword: this.formInline.keyword,
      beginDate: this.daterange[0],
      endDate: this.daterange[1],
      groupType: this.formInline.groupType
    }).then(res => {
      if (res.success) {
        this.tableData = res.data.pageInfo.list;
        this.chartData.columns = ['groupType', '潜在客户新增数'];
        this.chartData.rows = res.data.pageInfo.list.map(item => {
          return {
            groupType: item.groupType,
            '潜在客户新增数': item.customerNum
          }
        })
      }
    });
  }
};
</script>

<style>
</style>